<template>
    <div class="dynamic">
        <DisTopBar :title="'动态'" :action="'发布'" :color1="'#323133'"  :color2="'#323133'" :isShow="true" :url="'/newDyn'"></DisTopBar>
         <div class="dy-nav" ref="slid_block">
            <span ></span>
            <router-link v-slot="{navigate}" custom to="dynamicPag"><li @click="navigate">推荐</li></router-link>
            <router-link v-slot="{navigate}" custom to="attenPag"><li @click="navigate">关注</li></router-link>
            <router-link v-slot="{navigate}" custom to="/dynIndex/near"><li @click="navigate" >附近</li></router-link>          
        </div>
        <router-view></router-view>
        <BottomBar></BottomBar>
    </div>
</template>

<script>
    
   import DisTopBar from "../../component/DisTopBar";
   import BottomBar from "../../component/BottomBar"
    export default {
        name: "DynamicPag",
        data() {
            return {
                state:null
            }
        },
        components:{
            DisTopBar,
            BottomBar

        },
        mounted(){
            let span=this.$refs.slid_block.children[0]
            let lis=Array.from(this.$refs.slid_block.children).slice(1)
            lis.forEach(i=>i.addEventListener('click',clickHandler))
            let self=this
            lis[0].style.color='#000'
            function clickHandler(e) {
                lis[0].style.color='#ccc'
                self.state&&(self.state.style.color='#cccccc')
                self.state=this
                self.state.style.color='#000'
                let index=lis.indexOf(this)
                span.style.left=`${0.1+index*0.6}rem`
        
            }
        }
    }

</script>
<style lang='stylus' scoped>

    .dy-nav
        height .5rem
        padding-top  .1rem
        padding-left .11rem

        li 
            font-size .20rem
            color #ccc
            line-height .3rem
            width  .6rem
            text-align  left 
            list-style none 
            position relative
            float left 
            font-weight 550
        span 
            transition: all .3s;
            display block
            z-index -1
            height .08rem
            width 13%       
            position absolute 
            left .1rem
            top 1rem
            background linear-gradient(to right, #8b7cf4, #6c5deb);
        
</style>